<template>
  <div>
    <div class="search">
      <div class="block">
        <span style="font-size: 14px">日期：</span>
        <el-date-picker
          v-model="value"
          type="daterange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          size="mini"
          format="yyyy-MM-dd"
          value-format="yyyy-MM-dd"
        >
        </el-date-picker>
      </div>
      <el-button type="primary" @click="search">搜索</el-button>
    </div>
    <div class="content">
      <div class="tabbar">
        <div class="tabbox">
          <span>上报数</span>
          <hr />
          <span>{{ Exhibition.Reported }}</span>
        </div>
        <div class="taabox">
          <span>受理数</span>
          <hr />
          <span>{{ Exhibition.Acceptance }}</span>
        </div>
        <div class="tacbox">
          <span>处置数</span>
          <hr />
          <span>{{ Exhibition.Dispose }}</span>
        </div>
        <div class="tadbox">
          <span>办结数</span>
          <hr />
          <span>{{ Exhibition.Over }}</span>
        </div>
      </div>
      <div class="Proportion">
        <div class="chart1">
          <span>各问题类型占比</span>
          <div id="chart" class="chart"></div>
        </div>
        <div class="chart2">
          <span>职能部门处置数</span>
          <div id="charts" class="chart"></div>
        </div>
      </div>
      <div class="contenttext">
        <div class="taebox">
          <span>快速上报数：{{ Exhibition.SpeedinessNum }}</span>
          <hr />
          <span>{{ Exhibition.Speediness }}</span>
        </div>
        <div class="tafbox">
          <span>作废数：{{ Exhibition.Cancellation }}</span>
          <hr />
          <span>{{ Exhibition.CancellationRate }}</span>
        </div>
        <div class="tagbox">
          <span>办结数：{{ Exhibition.Over }}</span>
          <hr />
          <span>{{ Exhibition.OverRate }}</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Seats from '@/api/Seats'
export default {
  data() {
    return {
      value: '',
      searchtime: {
        endTime: '',
        startTime: '',
      },
      Exhibition: {},
      eacartsData: [],
      DepartmentList: [],
    }
  },
  methods: {
    statistics() {
      var date = new Date()
      var year = date.getFullYear()
      var month = date.getMonth() + 1
      var curDate = date.getDate()
      this.searchtime.startTime = year + '-' + month + '-' + '01'
      this.searchtime.endTime = year + '-' + month + '-' + curDate
      this.TableData()
    },
    search() {
      this.searchtime.startTime = this.value[0]
      this.searchtime.endTime = this.value[1]
      Seats.statistics(this.searchtime).then(e => {
        this.Exhibition = e.data
        let arr = []
        let ars = []
        this.Exhibition.typequeries.forEach(item => {
          arr.push({
            name: item.typeName,
            value: item.typeNum,
          })
        })
        this.Exhibition.DepartmentList.forEach(item => {
          ars.push({
            name: item.departmentName,
            value: item.departmentNum,
          })
        })
        this.eacartsData = arr
        this.DepartmentList = ars
        this.$nextTick(() => {
          this.getLoadEcharts()
        })
        this.$nextTick(() => {
          this.getEcharts()
        })
      })
    },
    TableData() {
      Seats.statistics(this.searchtime).then(e => {
        this.Exhibition = e.data
        let arr = []
        let ars = []
        this.Exhibition.typequeries.forEach(item => {
          arr.push({
            name: item.typeName,
            value: item.typeNum,
          })
        })
        this.Exhibition.DepartmentList.forEach(item => {
          ars.push({
            name: item.departmentName,
            value: item.departmentNum,
          })
        })
        this.eacartsData = arr
        this.DepartmentList = ars
        this.$nextTick(() => {
          this.getLoadEcharts()
        })
        this.$nextTick(() => {
          this.getEcharts()
        })
      })
    },
    getLoadEcharts() {
      var myChart = this.$echarts.init(document.getElementById('chart'))
      var option = {
        tooltip: {
          show: true,
          transitionDuration: 0,
        },

        // legend: {
        //   top: '5%',
        //   left: 'center',
        // },
        series: [
          {
            name: '问题类型',
            type: 'pie',
            radius: ['40%', '70%'],
            avoidLabelOverlap: false,
            itemStyle: {
              borderRadius: 10,
              borderColor: '#fff',
              borderWidth: 2,
            },
            label: {
              show: false,
              position: 'center',
            },
            emphasis: {
              label: {
                show: true,
                fontSize: 16,
                fontWeight: 'bold',
              },
            },
            labelLine: {
              show: false,
            },
            data: this.eacartsData,
          },
        ],
      }
      myChart.setOption(option)
    },
    getEcharts() {
      var myChart = this.$echarts.init(document.getElementById('charts'))
      var option = {
        tooltip: {
          show: true,
          transitionDuration: 0,
        },
        // legend: {
        //   top: '5%',
        //   left: 'center',
        // },
        series: [
          {
            name: '部门名称',
            type: 'pie',
            radius: ['40%', '70%'],
            avoidLabelOverlap: false,
            itemStyle: {
              borderRadius: 10,
              borderColor: '#fff',
              borderWidth: 2,
            },
            label: {
              show: false,
              position: 'center',
            },
            emphasis: {
              label: {
                show: true,
                fontSize: 16,
                fontWeight: 'bold',
              },
            },
            labelLine: {
              show: false,
            },
            data: this.DepartmentList,
          },
        ],
      }
      myChart.setOption(option)
    },
  },
  mounted() {},
  created() {
    this.statistics()
    this.TableData()
  },
}
</script>

<style scoped lang="scss">
@import './analysis.scss';
</style>
